<template>
  <div class="student-list">
    <div class="screen">
      <div class="left">
        <span class="label">班级信息：</span>
        <el-select
          v-model="value"
          filterable
          remote
          reserve-keyword
          clearable
          placeholder="请输入关键字搜索"
          :remote-method="remoteMethod"
          :loading="loading"
          @change="selectClass"
        >
          <el-option
            v-for="(item, index) in options"
            :key="index"
            :label="item"
            :value="item"
          >
          </el-option>
        </el-select>
        <!-- <el-button class="search" round size="small">搜索</el-button> -->
      </div>
      <div class="right">
        <span class="label">导入学生：</span>
        <span
          class="excel-btn"
          @click="importStudent"
        >
          <span>Excel导入</span>
          <el-icon>
            <Edit />
          </el-icon>
        </span>
        <span
          class="class-btn"
          @click="importClassStudent"
        >
          <span>授课班级导入</span>
          <el-icon>
            <Edit />
          </el-icon>
        </span>
        <el-button
          class="remove-btn btn-hover"
          round
          size="small"
          @click="delStudent(null)"
        >
          批量删除
        </el-button>
        <el-button
          class="remove-btn btn-hover"
          round
          size="small"
          @click="$router.go(-1)"
        >
          返回上一页
        </el-button>
      </div>
    </div>
    <p class="tips">注：此列表按照默认班级检索</p>
    <div class="list">
      <el-table
        :data="tableData"
        style="width: 100%"
        @select="selectStudent"
        @select-all="selectStudent"
      >
        <el-table-column
          type="selection"
          width="55"
        >
        </el-table-column>
        <el-table-column
          type="index"
          :index="indexMethod"
          label="序号"
          width="80"
        >
        </el-table-column>
        <el-table-column
          prop="name"
          label="姓名"
          width="180"
        >
        </el-table-column>
        <el-table-column
          prop="sno"
          label="学号"
        >
        </el-table-column>
        <el-table-column
          prop="className"
          label="班级"
        >
        </el-table-column>
        <el-table-column label="操作">
          <template #default="scope">
            <el-button
              size="mini"
              type="text"
              @click="editStudent(scope.row)"
            >
              修改
            </el-button>
            <el-button
              size="mini"
              type="text"
              @click="delStudent(scope.row.id)"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pages">
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          :page-size="pageSize"
          layout="total, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>

    <importDialog
      ref="importDialog"
      @refresh="refresh"
    />

    <importClassStudent
      ref="importClassStudent"
      @refresh="refresh"
    />

    <editorStudentDialog
      ref="editorStudentDialog"
      @refresh="refresh"
    />

    <tipsDialog
      ref="tipsDialog"
      @sure="callBack"
    />

  </div>
</template>

<script>
import importDialog from "./component/importUpload.vue";
import editorStudentDialog from "./component/editorStudentDialog.vue";
import importClassStudent from "./component/importClassStudent.vue";
import tipsDialog from "@/components/tipsDialog.vue";
import { studentList, studentDel, searchClassList } from "@/api/courseReach";

export default {
  components: {
    importDialog,
    editorStudentDialog,
    importClassStudent,
    tipsDialog,
  },
  data() {
    return {
      id: null,
      options: [],
      value: [],
      loading: false,
      className: "",
      list: [],
      checkList: [],
      total: 0,
      tableData: [],
      pageNum: 1,
      pageSize: 10,
      subData: null,
    };
  },

  created() {
    this.id = this.$route.query.id;
    this.getList();
  },

  methods: {
    getList() {
      studentList({
        className: this.className,
        concludeId: this.id,
        pageNum: this.pageNum,
        pageSize: this.pageSize,
      }).then((res) => {
        const { total, list } = res.data;
        this.total = total;
        this.tableData = list;
      });
    },
    indexMethod(index) {
      return (this.pageNum - 1) * 10 + index + 1;
    },
    remoteMethod(query) {
      if (query !== "") {
        this.loading = true;
        searchClassList({
          className: query,
          concludeId: this.id,
        }).then((res) => {
          this.loading = false;
          this.options = res.data;
        });
      } else {
        this.options = [];
      }
    },
    selectClass(val) {
      this.pageNum = 1;
      this.className = val || "";
      this.getList();
    },
    selectStudent(selection) {
      const list = JSON.stringify(selection, ["id"]);
      this.checkList = JSON.parse(list);
    },
    handleCurrentChange(val) {
      this.pageNum = val;
      this.getList();
    },
    importStudent() {
      this.$refs.importDialog.init(1, this.id);
    },

    editStudent(data) {
      this.$refs.editorStudentDialog.init(data);
    },

    importClassStudent() {
      //6666666没有courseid
      //先写死
      const data = {
        courseId: localStorage.getItem("setCourseId"),
        // courseId: 217,
        concludeId: this.id,
      };
      console.log(data,'data');
      this.$refs.importClassStudent.init(data);
    },

    refresh() {
      this.pageNum = 1;
      this.getList();
    },

    delStudent(id) {
      const list = id ? [{ id }] : this.checkList;

      if (!list.length) {
        this.$message.warning("请选择删除学生");
        return false;
      }

      this.subData = list;

      this.$refs.tipsDialog.init({
        type: "error",
        info: "是否删除选中",
      });
    },

    callBack() {
      studentDel(this.subData)
        .then((res) => {
          this.checkList = [];
          const totalPage = Math.ceil((this.total - 1) / this.pageSize);
          this.$message.success("删除成功");
          this.pageNum = this.pageNum > totalPage ? totalPage : this.pageNum;
          this.pageNum = this.pageNum < 1 ? 1 : this.pageNum;
          this.getList();
        })
        .catch(() => {});
    },
  },
};
</script>
<style lang="scss">
a {
  text-decoration: none;
}
.student-list {
  .screen {
    .el-input__inner {
      width: 200px;
    }

    input::-webkit-input-placeholder {
      color: #bababa;
      font-size: 14px;
    }
  }

  .el-table th {
    color: #474747;
    font-weight: 400;
  }

  .el-table__body tr:hover > td {
    background-color: #f0f8ff !important;
  }

  .el-table__body tr.current-row > td {
    background-color: #f0f8ff !important;
  }
  .el-button--text {
    span:hover {
      color: #1277eb !important;
    }
  }
}
</style>
<style lang="scss" scoped>
.student-list {
  margin: 0 auto 30px auto;
  box-sizing: border-box;
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.05);
  background: #fff;
  padding: 30px 41px;
  border-radius: 0 0 5px 5px;
  .pages {
    display: flex;
    justify-content: flex-end;
    margin: 20px 0;
  }
  .screen {
    display: flex;
    .label {
      font-size: 14px;
      color: #727272;
      font-weight: 400;
      min-width: 74px;
    }

    .search {
      font-size: 14px;
      margin-left: 15px;
      padding: 8px 30px;
      color: #1277eb;
      border: 1px solid #1277eb;
      font-weight: 400;
    }
    .left {
      display: flex;
      align-items: center;
      width: 400px;
    }
    .right {
      margin-left: auto;
      img {
        width: 14px;
        vertical-align: sub;
        margin-left: 10px;
        margin-bottom: 1px;
      }
      .el-icon {
        transform: translateY(2px);
      }

      .excel-btn,
      .class-btn {
        cursor: pointer;
        color: #1277eb;
        font-size: 14px;
        font-weight: 400;
      }

      .class-btn {
        margin-left: 40px;
        margin-right: 12px;
      }

      .remove-btn {
        font-size: 14px;
        margin-left: 15px;
        padding: 16px;
        color: #1277eb;
        border: 1px solid #1277eb;
        font-weight: 400;
      }
    }
  }

  .tips {
    margin-top: 20px;
    color: #1277eb;
    font-weight: 400;
    font-size: 14px;
  }

  .list {
    margin-top: 18px;
  }

  .btn-hover:hover {
    background: #1277eb;
    color: #fff !important;
  }
}
</style>
